import { type BaseProps } from '@/types';
import { classNames } from '@/utils/helpers';

type CardProps = BaseProps & {
  title?: string;
  subtitle?: string;
};

export const Card = ({
  children,
  className,
  title,
  subtitle,
}: CardProps) => {
  return (
    <div className={classNames(
      'bg-white rounded-lg shadow-md overflow-hidden',
      className
    )}>
      {(title || subtitle) && (
        <div className="px-6 py-4">
          {title && <h3 className="text-lg font-medium text-gray-900">{title}</h3>}
          {subtitle && <p className="mt-1 text-sm text-gray-500">{subtitle}</p>}
        </div>
      )}
      <div className="px-6 py-4">
        {children}
      </div>
    </div>
  );
};